<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas渐变</title>
    <style>
        canvas{background-color:black;}
    </style>
</head>

<body>
<canvas id="canvas" width="800px" height="800px">您的浏览器不支持</canvas>
<script>
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    var radialGradient = context.createRadialGradient(300,200,0,200,200,100);

    radialGradient.addColorStop(0,'rgba(255,255,255,.7)');
    radialGradient.addColorStop(0.2,'rgba(255,0,0,.8)');
    radialGradient.addColorStop(0.8,'rgba(255,255,255,.5)');
    radialGradient.addColorStop(1,'rgba(255,255,255,.1)');

    context.beginPath();
    context.arc(200,200,100,0,Math.PI*2,true);
    context.fillStyle=radialGradient;
    context.fill();

</script>

</body>

</html>